<template>
<div @click="gourl" class="container">
  <Echart
        id="rightTop"
        :options="option"
        class="right_top_inner"
        ref="charts"
    />
</div>
  
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      seriesDate: {
      '8.27': [
        [0, -1000], [20, 0], [40, 2000], [60, 4000], [80, 6000],
        [100, 8000], [95.07, 2000],[95.57, 660]
      ],
      '8.29': [
        [0, -500], [20, 0], [40, 3000], [60, 5000], [80, 7000],
        [100, 9000], [120, 11000], [140, 13000]
      ],
      '8.30': [
        [0, 0], [20, 2000], [40, 4000], [60, 6000], [80, 8000],
        [100, 10000], [120, 12000], [140, 14000]
      ]
    },
      option: {} // 用于配置 Echarts 图表的选项
    };
  },

  created() {//是一个生命周期钩子函数

  },

  mounted() {//是一个生命周期钩子函数
    this.getData();//用于获取数据
  },

  methods: {
    gourl() {
      this.$router.push('/index/echart-stress'); // 使用路由名跳转
    },
    async getData() {
      try {
        const response = await axios.get('http://localhost:8080/stress/grouped');
        console.log('echartStress查询应力的response.data = ', response.data);
        console.log('echartStress查询应力的response = ', response);

        //修改格式
        // res 为接口返回的完整对象
        this.seriesDate = Object.fromEntries(
          Object.entries(response.data).map(([date, arr]) => [
            date,
            arr.map(({ deepth, stress }) => [Number(deepth), Number(stress)])
          ])
        );

        if (response.code === '0') {
          this.$nextTick(() => {
            console.log('Dom已经渲染~~')  
            console.log('this.seriesDate = ',this.seriesDate) 
            this.init(this.seriesDate);
          });
        } else {
          this.$message.error('查询应力失败');
        }
      } catch (error) {
        this.$message.error('查询应力失败');
      }
      // this.$nextTick(() => {
      //       console.log('Dom已经渲染~~')  
      //       console.log('this.seriesDate = ',this.seriesDate)  
      //       this.init(this.seriesDate);
      //     });
    },
    init(data) {
      console.log('开始画图~~~');

      const colors = [
        "rgba(236,167,30,0.7)",
        "rgba(30,144,236,0.7)",
        "rgba(30,236,144,0.7)",
        "rgba(144,30,236,0.7)",
        "rgba(236,30,144,0.7)"
      ];

      //整体平移2000
      const shift = 2000;
      const series = Object.entries(data).map(([name, points], idx) => ({
        name,
        type: 'line',
        data: points.map(([x, y]) => [y + shift, x]), // 交换 xy
        smooth: true,
        symbol: 'none',
        color: colors[idx % colors.length]
      }));

      this.option = {
        xAxis: {
          type: 'value',
          name: 'Stress (μɛ)',
          min: 0,
          max: 16000 + shift,
          interval: 2000,
          position: 'top',        
          splitLine: { show: false },
          axisLine: { 
            show: true, 
            lineStyle: { color: '#1F63A3', width: 2 },
            onZero: false  // 强制轴线也画在top
          },
          axisLabel: { 
            color: '#7EB7FD', 
            fontWeight: 500,
            formatter: val => val - 2000, // ← 显示为原始值 
            }
        },
        yAxis: {
          type: 'value',
          name: 'Deepth(m)',
          min: 0,
          max: 140,
          interval: 20,
          position: 'left',          // 放在左侧
          inverse: true,            // true 可让 0 在顶部
          splitLine: { show: false },
          axisLine: { show: true, lineStyle: { color: '#1F63A3', width: 2 } },
          axisLabel: { color: '#7EB7FD', fontWeight: 500 }
        },
        // tooltip: { // 鼠标悬停时弹出的 数据提示框
        //   trigger: 'axis',
        //   backgroundColor: 'rgba(0,0,0,.6)',
        //   borderColor: 'rgba(147,235,248,.8)',
        //   textStyle: { color: '#FFF' }
        // },
        // legend: { // 标签
        //   data: Object.keys(data),
        //   right: 10,
        //   top: 'center',
        //   orient: 'vertical',
        //   textStyle: { color: '#7EB7FD' }
        // },
        grid: { // 网格
          show: false,
          left: 10, right: 5, top: 10, bottom: 5,
          containLabel: true
        },
        series
      };

      this.$refs.charts.echartsInstance.setOption(this.option, true);
    },
  }
};
</script>
<style lang='scss' scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 350px; /* 调整图表容器的宽度 */
  height: 260px; /* 调整图表容器的高度 */
  overflow: hidden;
}
.right_top_inner {
  width: 100%;
  height: 100%;

}
</style>
